<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>事件处理</h1>
    <ul>
        <li>事件：鼠标、键盘等用户操作行为。</li>
        <li>事件处理：用于处理事件的程序、函数。</li>
        <li>事件处理函数：js中使用绑定函数的方式，来响应用户的事件行为。</li>
    </ul>
    <h2>绑定事件处理函数的三种方式</h2>
    <ul>
        <li>在标签上绑定：<mark>onXXX="函数名()"</mark></li>
        <li>通过DOM对象的<mark>onXXX=函数</mark>的方式</li>
        <li>通过DOM对象的<mark>addEventListener("事件名",函数)</mark>的方式。</li>
    </ul>
    文本框：<input oninput="handleInput(this)">
    <p class="p1">点击我</p>
    <script>

        let p1 = document.querySelector(".p1");

        function handleInput(obj) {
            console.log(obj.value);
        }

        // 绑定方式2
        p1.onclick = function() {
            alert(p1.innerHTML);
        }

        // 绑定方式3
        p1.addEventListener("mouseover",function() {
            p1.style.color = "#f00";
            console.log("this = ",this);
        })

        p1.addEventListener("mouseout",function() {
            p1.style.color = "#000";
        })


    </script>
</body>
</html>